<template>
  <div class="items-box">
    <div class="cover-img">
      <img
        class="img-inner"
        v-imgError2
        v-if="item.headUrl"
        :src="item.headUrl"
        alt=""
      />
      <img
        class="img-inner"
        v-else
        src="./../assets/images/empty-img.png"
        alt=""
      />
      <!-- <el-image v-else>
                <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline" style="font-size: 38px; color: #ccc"></i>
                </div>
            </el-image> -->
    </div>

    <div class="text-box">
      <div class="title">{{ item.title }}</div>
      <div class="type">
        <span class="type-word">{{ item.newsTypeName || "--" }}</span>
      </div>
      <div class="time-row">
        <span v-if="item.releaseTime">{{ item.releaseTime }}</span>
      </div>
      <!-- <span class="source">数据平台</span> -->
    </div>
  </div>
</template>

<script>
export default {
  // 组件名称
  name: "ListItems",
  props: ["item", "isHideLine"],
  // 局部注册的组件
  components: {},
  // 组件状态值
  data() {
    return {};
  },
  methods: {},
  created() {},
  mounted() {},
};
</script>
<style lang="less" scoped>
.items-box {
  width: 552px;
  flex-shrink: 0;
  height: 215px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  display: flex;
  box-shadow: 0px 4px 12px 0px #e2e3e5;
  border: 1px solid #d4d6da;
  margin-bottom: 75px;
  background: #ffffff;
  padding-left: 25px;
  cursor: pointer;

  .cover-img {
    width: 159px;
    height: 219px;
    flex-shrink: 0;
    margin-top: -34px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #ccc;
    background: white;

    .img-inner {
      object-fit: cover;
      width: 100%;
      height: 100%;
    }
  }

  .text-box {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 25px 20px 28px;
    align-items: flex-start;
    overflow: hidden;
    .title {
      font-size: 20px;
      line-height: 26px;
      margin-bottom: 15px;
      -webkit-line-clamp: 2;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #37383d;
      text-align: left;
      font-family: PingFangSC-Regular, PingFang SC;
    }

    .type {
      .type-word {
        padding: 3px 14px;
        background: rgba(132, 135, 139, 0.07);
        color: #2f8efe;
        border-radius: 4px;
        border: 1px solid #2f8efe;
        font-family: PingFangSC-Regular, PingFang SC;
      }
    }

    .time-row {
      position: absolute;
      bottom: 25px;
      left: 20px;
      font-size: 18px;
      color: #9597a0;
      font-family: PingFangSC-Regular, PingFang SC;
    }
    .source {
      position: absolute;
      bottom: 25px;
      right: 20px;
      font-size: 18px;
      color: #9597a0;
      font-family: PingFangSC-Regular, PingFang SC;
    }
  }
}

.items-box:hover {
  animation: move 1s linear forwards;
}
@keyframes move {
  0% {
    transform: translateY(0);
  }

  25% {
    transform: translateY(-5px);
  }

  50% {
    transform: translateY(-8px);
  }

  75% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(-12px);
  }
}
</style>
